import { observer } from "mobx-react-lite";

import Person from './store/Person';

const student = new Person('张三');

const ShowStudent = observer<{ store: Person }>(({ store }) => {
  return <div>
    <h1>姓名：{store.getName()}</h1>
    <h1>所在城市：{store.city.cityName}</h1>
  </div>
});

const ModifyStudent = observer<{ store: Person }>(({ store }) => {
  const modifyPerson = () => {
    store.setName('李四');
  };

  const modifyCity = () => {
    store.city.setCityName('上海市');
  };
  
  return (
    <>
      <button onClick={modifyPerson}>修改人名</button>
      <button onClick={modifyCity}>修改城市</button>
      <button onClick={() => {
        store.reset();
      }}>重置</button>
    </>
  )
});

const App = () => <div>
  <ShowStudent store={ student } />
  <ModifyStudent store={ student } />
</div>;

export default App;